<template>
  <scroll-view scroll-x class="scroll-x" enable-flex>
    <!-- 需要设置inline-block -->
    <view class="category">
      <view
        class="category-item"
        v-for="item in categoryList"
        :key="item.id"
        @tap.self="changeCategory(item.id)"
        :class="current_index === item.id ? 'active' : ''"
      >
        <text class="category-item-name">{{ item.name }}</text>
      </view>
    </view>
  </scroll-view>
  <scroll-view
    scroll-y
    class="scroll"
    @scrolltolower="getProductList()"
    lower-threshold="200"
    enable-flex
  >
    <view
      :v-if="allcategoryProductList?.length > 0"
      v-for="categoryProductobj in allcategoryProductList"
      :key="categoryProductobj.id"
      v-show="categoryProductobj.isShow"
    >
      <view class="guess">
        <navigator
          class="guess-item"
          v-for="item in categoryProductobj.categoryProductList"
          :key="item.id"
          :url="`/pages/goods/goods?goods_id=${item.id}`"
        >
          <image class="image" mode="aspectFill" :src="`${baseURL}/${item.cover}`"></image>
          <view class="name"> {{ item.name }} </view>
          <view class="price">
            <text class="small">¥</text>
            <text>{{ item.current_price }}</text>
          </view>
        </navigator>
      </view>
    </view>
    <view class="loading-text" v-if="!allcategoryProductList[category_id]?.isFinshed">
      正在加载...
    </view>
    <view class="loading-text" v-else> 加在完成，没有更多数据了...</view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, getCurrentInstance, watch, nextTick } from 'vue'
import { baseURL } from '@/utils/http'
import type { ProductType, categoryType } from '@/types/home'
import type { categoryProductListType } from '@/types/categoryProductList'
import { getCategoryProductListAPI } from '@/services/goodsApi'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { getCategoryListAPI } from '@/services/homeApi'

const params = defineProps({
  id: {
    type: Number,
    default: 0,
  },
})
const current_index = ref(params.id)
// 分类列表
const categoryList = ref([] as categoryType)
// 当前id
const category_id = ref(1)
const initpage = ref(1)
const ProductList = ref<ProductType[]>([])
// 用于存储所有列表 [{id:1,categoryProductList:[商品列表]},]
const allcategoryProductList = ref<categoryProductListType[]>([])
// const page = ref(1)
const size = ref(6)
const isFinished = ref(false)
const update = false
// 获取商品列表，当allcategoryProductList中没有当前分类下的数据时候添加进去
const getProductList = async () => {
  const categoryProductListItem = allcategoryProductList.value.find((item) => {
    if (item.id !== category_id.value) {
      item.isShow = false
    } else {
      item.isShow = true
    }
    return item.id === category_id.value
  })
  console.log('获取categoryProductListItem对象')
  console.log(categoryProductListItem)
  if (categoryProductListItem) {
    // categoryProductListItem.isShow = true
    console.log('当前有该分类缓存')
    const maxPage = Math.ceil(categoryProductListItem!.count / size.value)
    console.log('当前分类下的最大页数')
    console.log(maxPage)
    // 如果最大页数大于当前分类下商品所在的页数
    if (maxPage >= categoryProductListItem.page) {
      const res = await getCategoryProductListAPI(categoryProductListItem.page, category_id.value)
      console.log(`发送请求，分类id为${category_id.value}`)
      categoryProductListItem.categoryProductList!.push(...res.data!)
      categoryProductListItem.page++
    } else {
      categoryProductListItem.isFinshed = true
    }
  } else {
    console.log('当前没有该分类缓存')
    // 如果不存在当前的分类，说明还未添加过这时候就需要添加新的分类所对应的列表
    const res = await getCategoryProductListAPI(initpage.value, category_id.value)
    if (res.count === 0) {
      console.log('该分类没有商品')
      allcategoryProductList?.value?.push({
        id: category_id.value,
        page: initpage.value,
        categoryProductList: [...res.data!],
        count: res.count!,
        isFinshed: true,
        isShow: true,
      })
    } else {
      console.log('首次加载该分类，添加到列表')
      allcategoryProductList?.value?.push({
        id: category_id.value,
        page: 2,
        categoryProductList: [...res.data!],
        count: res.count!,
        isFinshed: false,
        isShow: true,
      })
      console.log(allcategoryProductList.value)
    }
    // 首先会执行一次请求，也就是第一页的数据，这个时候存储第二页就可以了，下次从第二页开始请求
  }
}
// 获取分类列表
const getCategoryList = async () => {
  const res = await getCategoryListAPI()
  console.log('获取分类列表')
  console.log(res.data)
  if (res.statusCode === 200) {
    categoryList.value = res.data!
  }
}
watch(
  allcategoryProductList,
  () => {
    allcategoryProductList.value.forEach((item) => {
      if (item.id === category_id.value) {
        item.isShow = true
      } else {
        item.isShow = false
      }
    })
  },
  { deep: true },
)
const changeCategory = async (id: number) => {
  current_index.value = id
  category_id.value = id
  await getProductList()
}
// // 滚动到底部后执行的操作
// const scrolltolower = async () => {
//   // categoryProductList查找到当前分类下的列表
//   const categoryProductListItem = allcategoryProductList.value.find((item) => { item.id === category_id.value })
//   if (categoryProductListItem) {
//     const maxPage = Math.ceil(categoryProductListItem!.count / size.value)
//     if (maxPage >= categoryProductListItem.page) {
//       const res = await getCategoryProductListAPI(categoryProductListItem.page, category_id.value)
//       categoryProductListItem.categoryProductList!.push(...res.data!)
//       categoryProductListItem.page++
//     } else {
//       isFinished.value = true
//     }

//   } else {
//     // 如果不存在当前的分类，说明还未添加过这时候就需要添加新的分类所对应的列表
//     const res = await getCategoryProductListAPI(1, category_id.value)
//     if (res.count === 0) {
//       allcategoryProductList.value.push({ id: category_id.value, page: 2, categoryProductList: [...res.data!], count: res.count!, isFinshed: true })
//     }
//     // 首先会执行一次请求，也就是第一页的数据，这个时候存储第二页就可以了，下次从第二页开始请求

//   }
// }
watch(
  allcategoryProductList,
  () => {
    console.log('监听到了数据变化')
    console.log(allcategoryProductList.value)
    // 当category_id发生变化时，需要重新获取商品列表
  },
  { deep: true },
)

// 监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成
// ，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。
onLoad(async () => {
  category_id.value = params.id
  console.log(category_id.value)
  console.log('onload执行获取商品列表')
  await getCategoryList()
  await getProductList()
})
// 监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onReady(async () => {
  console.log('onReady执行获取分类列表')
  console.log('页面数据')
})
</script>

<style lang="scss">
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #efefef;
  .scroll-x {
    width: 100%;
    // 平分大小
    flex-grow: 1;
    // 空白字符合并
    white-space: nowrap;
  }
  .scroll {
    flex-grow: 9;
  }
}

.category {
  width: 100%;
  height: 200rpx;
}

.category-item {
  display: inline-block;
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 30rpx;
  color: #262626;
  margin-right: 20rpx;
}

.active {
  border-bottom: 2rpx solid #d81e06;
  .category-item-name {
    color: #d81e06;
  }
}

/* 分类标题 */

/* 猜你喜欢 */
.guess {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;

  .guess-item {
    width: 345rpx;
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
  }

  .image {
    width: 304rpx;
    height: 304rpx;
  }

  .name {
    height: 75rpx;
    margin: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    line-height: 1;
    padding-top: 4rpx;
    color: #cf4444;
    font-size: 26rpx;
  }

  .small {
    font-size: 80%;
  }
}

// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}
</style>
